<template>
 <ul class="list">
    <li class="item" v-for="(val,index) in msg.cities" :key="index" @click="clickey">{{index}}</li>
 </ul>
</template>
<script>
export default {
  name: 'cityAlphabet',
  props: {
    msg: Object
  },
  methods: {
    clickey (e) {
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>
<style lang="stylus" scoped>
.list
  position absolute
  right: 0
  top:1.72rem
  bottom: 0
  width 0.4rem
  display: flex
  flex-direction: column
  justify-content: center
  .item
    line-height: .4rem
    color: #00bcd4
    text-align: center
</style>
